<template>
  <router-view />
  <DebugTools v-if="isDevelopment" />
</template>

<script setup>
import { onMounted } from 'vue'
import { useThemeStore } from './stores/theme'
import DebugTools from './components/DebugTools.vue'

const theme = useThemeStore()
const isDevelopment = import.meta.env.DEV

onMounted(() => theme.init())
</script>

<style>
html, body, #app { height: 100%; margin: 0; }

/* Theme variables */
:root {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --text: #1f2937;
  --border: #e5e7eb;
  --primary: #2563eb;
  --primary-bg: #2563eb;
  --hover-bg: #f9fafb;
  --menu-bg: #ffffff;
  --menu-text: #1f2937;
  --drop-zone-bg: rgba(59,130,246,0.6);
}
[data-theme="dark"] {
  --bg: #0f172a;
  --surface: #111827;
  --text: #e5e7eb;
  --border: #374151;
  --primary: #60a5fa;
  --primary-bg: #1e40af;
  --hover-bg: #1f2937;
  --menu-bg: #1f2937;
  --menu-text: #e5e7eb;
  --drop-zone-bg: rgba(96,165,250,0.6);
}
[data-theme="blue"] {
  --bg: #eef2ff;
  --surface: #ffffff;
  --text: #1e3a8a;
  --border: #c7d2fe;
  --primary: #3b82f6;
  --primary-bg: #2563eb;
  --hover-bg: #e0e7ff;
  --menu-bg: #ffffff;
  --menu-text: #1e3a8a;
  --drop-zone-bg: rgba(59,130,246,0.6);
}
[data-theme="green"] {
  --bg: #ecfdf5;
  --surface: #ffffff;
  --text: #064e3b;
  --border: #a7f3d0;
  --primary: #10b981;
  --primary-bg: #059669;
  --hover-bg: #d1fae5;
  --menu-bg: #ffffff;
  --menu-text: #064e3b;
  --drop-zone-bg: rgba(16,185,129,0.6);
}

/* Theme helper classes */
.theme-bg { background-color: var(--bg); }
.theme-surface { background-color: var(--surface); }
.theme-text { color: var(--text); }
.theme-border { border-color: var(--border); }
.theme-primary { color: var(--primary); }
.theme-primary-bg { background-color: var(--primary-bg); }
.theme-hover-bg:hover { background-color: var(--hover-bg); }
.theme-menu-bg { background-color: var(--menu-bg); }
.theme-menu-text { color: var(--menu-text); }
.theme-drop-zone { background-color: var(--drop-zone-bg); }
</style>
